<template>
  <div class="message-list">
    <el-skeleton v-if="loading" :rows="5" animated />
    
    <div v-else-if="messages.length === 0" class="empty-state">
      <el-empty description="暂无消息" />
    </div>
    
    <div v-else class="message-items">
      <div
        v-for="message in messages"
        :key="message.id"
        class="message-item"
        :class="{ 'unread': !message.isRead, 'system': message.type === 'system' }"
        @click="handleMessageClick(message)"
      >
        <div class="message-avatar">
          <el-avatar
            :size="45"
            :src="message.senderAvatar"
            :icon="message.type === 'system' ? 'Bell' : 'User'"
            :style="{ backgroundColor: message.type === 'system' ? '#f56c6c' : '#409eff' }"
          />
        </div>
        
        <div class="message-content">
          <div class="message-header">
            <div class="message-info">
              <span class="sender-name">{{ message.senderName || '系统通知' }}</span>
              <el-tag
                v-if="message.type === 'system'"
                type="danger"
                size="small"
                class="message-type-tag"
              >
                系统
              </el-tag>
              <el-tag
                v-else-if="message.priority === 'high'"
                type="warning"
                size="small"
                class="message-type-tag"
              >
                重要
              </el-tag>
            </div>
            <div class="message-time">
              {{ formatTime(message.createTime) }}
            </div>
          </div>
          
          <div class="message-title">
            {{ message.title }}
          </div>
          
          <div class="message-preview">
            {{ message.content }}
          </div>
          
          <div class="message-actions">
            <el-button
              type="primary"
              size="small"
              text
              @click.stop="$emit('message-click', message)"
            >
              查看详情
            </el-button>
            <el-button
              v-if="message.type !== 'system'"
              type="success"
              size="small"
              text
              @click.stop="handleReply(message)"
            >
              回复
            </el-button>
            <el-button
              type="danger"
              size="small"
              text
              @click.stop="handleDelete(message)"
            >
              删除
            </el-button>
          </div>
        </div>
        
        <div v-if="!message.isRead" class="unread-indicator"></div>
      </div>
    </div>
    
    <!-- 分页 -->
    <div v-if="messages.length > 0" class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import { ElMessageBox } from 'element-plus'
import { formatDistanceToNow } from 'date-fns'
import { zhCN } from 'date-fns/locale'

// Props
const props = defineProps({
  messages: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['message-click', 'delete-message', 'reply-message'])

// 响应式数据
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 方法
const formatTime = (time) => {
  if (!time) return ''
  
  const date = new Date(time)
  const now = new Date()
  const diffInHours = (now - date) / (1000 * 60 * 60)
  
  if (diffInHours < 24) {
    return formatDistanceToNow(date, { 
      addSuffix: true, 
      locale: zhCN 
    })
  } else {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  }
}

const handleMessageClick = (message) => {
  emit('message-click', message)
}

const handleReply = (message) => {
  emit('reply-message', message)
}

const handleDelete = async (message) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除来自 ${message.senderName || '系统'} 的消息吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    emit('delete-message', message.id)
  } catch (error) {
    // 用户取消删除
  }
}

const handleSizeChange = (size) => {
  pageSize.value = size
  // 这里可以触发重新加载数据的事件
}

const handleCurrentChange = (page) => {
  currentPage.value = page
  // 这里可以触发重新加载数据的事件
}
</script>

<style scoped>
.message-list {
  width: 100%;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.message-items {
  space-y: 12px;
}

.message-item {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  margin-bottom: 12px;
}

.message-item:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.message-item.unread {
  border-left: 4px solid #409eff;
  background: linear-gradient(90deg, rgba(64, 158, 255, 0.05) 0%, #fff 100%);
}

.message-item.system {
  border-left-color: #f56c6c;
}

.message-item.system.unread {
  background: linear-gradient(90deg, rgba(245, 108, 108, 0.05) 0%, #fff 100%);
}

.message-avatar {
  margin-right: 12px;
  flex-shrink: 0;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.message-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sender-name {
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
}

.message-type-tag {
  margin-left: 4px;
}

.message-time {
  font-size: 12px;
  color: #909399;
}

.message-title {
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 6px;
  line-height: 1.4;
}

.message-preview {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.message-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.message-item:hover .message-actions {
  opacity: 1;
}

.unread-indicator {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  background: #409eff;
  border-radius: 50%;
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

:deep(.el-pagination) {
  justify-content: center;
}
</style>
